import React from 'react';
import Reflux from 'reflux';
import {Row, Col} from 'antd';
import {Button, Table, Divider, Icon, Modal} from 'antd';

//dataSource:数据源
//columns:数据列头

class SimpleTable extends Reflux.Component {

    constructor(props) {
        super(props)
        this.state = {
            loading: false,
            selectedRowKeys: []
        }
    }

    componentDidMount() {
        this.props.columns.push(
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <span>
                        <a href="javascript:;">编辑</a>
                        <Divider type="vertical"/>
                        <a href="javascript:;">删除</a>
                    </span>
                ),
            }
        );
    }

    deleteAction() {
        this.setState({loading: true});
        // ajax request after empty completing
        setTimeout(() => {
            this.setState({
                selectedRowKeys: [],
                loading: false,
            });
        }, 1000);
    }

    onSelectChange = (selectedRowKeys) => {
        this.setState({selectedRowKeys});
    }

    handleOk = () => {
        this.setState({loading: true});
        setTimeout(() => {
            this.setState({loading: false, visible: false});
        }, 3000);
    }
    handleCancel = () => {
        this.setState({visible: false});
    }
    showModal = () => {
        this.setState({
            visible: true,
        });
    }

    render() {
        const {loading, visible, selectedRowKeys} = this.state;
        const hasSelected = selectedRowKeys.length > 0;

        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        const paginationProps = {
            pageSize: this.props.pageSize,
            current: this.props.current,
            total: this.props.total,
            onChange: this.props.onPageChange,
        };

        return (
            <div>
                <div style={{marginBottom: 16, textAlign: 'right'}}>
                    <Button type="primary" style={{marginRight: '5px'}} onClick={this.showModal.bind(this)}>
                        新增
                    </Button>
                    <Button type="primary" style={{marginRight: '5px'}} onClick={this.deleteAction.bind(this)}
                            disabled={!hasSelected}
                            loading={loading}>
                        删除
                    </Button>
                    {this.props.toolbarBtns ? this.props.toolbarBtns.map(function (item) {
                        return item;
                    }) : ''}
                </div>
                <Table loading={this.props.loading} rowSelection={rowSelection} dataSource={this.props.dataSource}
                       columns={this.props.columns} pagination={paginationProps}/>

                <Modal
                    visible={visible}
                    title="Title"
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    footer={[
                        <Button key="back" onClick={this.handleCancel}>Return</Button>,
                        <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
                            Submit
                        </Button>,
                    ]}
                >
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Modal>
            </div>
        )
    }
}

export default SimpleTable;
